<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>雇主_阿姨管理首页</title>
    <script src="https://cdn.tailwindcss.com/3.3.3"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css">
    <style>
        body {
            font-family: 'Noto Sans SC', sans-serif;
            max-width: 750px;
            margin: 0 auto;
            background-color: #f5f5f5;
        }
        .active-tab {
            color: #4f46e5;
            border-bottom: 2px solid #4f46e5;
        }
        .active-status {
            background-color: #4f46e5;
            color: white;
        }
        .card-hover {
            transition: all 0.3s ease;
        }
        .card-hover:hover {
            transform: translateY(-3px);
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        }
    </style>
</head>
<body class="pb-16">
    <!-- 顶部筛选区 -->
    <div class="bg-white p-4 sticky top-0 z-10 shadow-sm">
        <div class="flex space-x-2 mb-4 overflow-x-auto pb-2">
            <button class="px-4 py-1 rounded-full active-status" onclick="filterAunties('all')">全部</button>
            <button class="px-4 py-1 rounded-full bg-gray-100" onclick="filterAunties('serving')">服务中</button>
            <button class="px-4 py-1 rounded-full bg-gray-100" onclick="filterAunties('terminated')">已解约</button>
        </div>
        <div class="relative">
            <input type="text" placeholder="搜索阿姨姓名" class="w-full pl-10 pr-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500" id="searchInput" oninput="searchAunties()">
            <i class="fas fa-search absolute left-3 top-3 text-gray-400"></i>
        </div>
    </div>

    <!-- 阿姨列表区 -->
    <div class="p-4 space-y-4" id="auntieList">
        <!-- 阿姨卡片1 -->
        <div class="bg-white rounded-lg shadow-sm card-hover p-4 auntie-card" data-status="serving">
            <div class="flex items-center">
                <img src="https://s.coze.cn/image/sAqJw3a4xjc/" class="w-16 h-16 rounded-full object-cover mr-4" alt="张阿姨">
                <div class="flex-1">
                    <div class="flex justify-between items-center">
                        <h3 class="font-semibold text-lg">张阿姨</h3>
                        <span class="text-sm bg-green-100 text-green-800 px-2 py-1 rounded">服务中</span>
                    </div>
                    <div class="flex items-center mt-1">
                        <span class="text-sm text-gray-500 mr-2">服务次数: 12次</span>
                        <div class="flex items-center">
                            <i class="fas fa-star text-yellow-400 mr-1"></i>
                            <span class="text-sm">4.8</span>
                        </div>
                    </div>
                </div>
            </div>
            <div class="flex justify-end space-x-2 mt-3">
                <button class="px-3 py-1 border border-gray-300 rounded text-sm" onclick="viewDetail('1')">查看详情</button>
                <button class="px-3 py-1 bg-indigo-600 text-white rounded text-sm" onclick="arrangeService('1')">安排服务</button>
            </div>
        </div>

        <!-- 阿姨卡片2 -->
        <div class="bg-white rounded-lg shadow-sm card-hover p-4 auntie-card" data-status="serving">
            <div class="flex items-center">
                <img src="https://s.coze.cn/image/bWa5L7qMcGc/" class="w-16 h-16 rounded-full object-cover mr-4" alt="李阿姨">
                <div class="flex-1">
                    <div class="flex justify-between items-center">
                        <h3 class="font-semibold text-lg">李阿姨</h3>
                        <span class="text-sm bg-green-100 text-green-800 px-2 py-1 rounded">服务中</span>
                    </div>
                    <div class="flex items-center mt-1">
                        <span class="text-sm text-gray-500 mr-2">服务次数: 8次</span>
                        <div class="flex items-center">
                            <i class="fas fa-star text-yellow-400 mr-1"></i>
                            <span class="text-sm">4.6</span>
                        </div>
                    </div>
                </div>
            </div>
            <div class="flex justify-end space-x-2 mt-3">
                <button class="px-3 py-1 border border-gray-300 rounded text-sm" onclick="viewDetail('2')">查看详情</button>
                <button class="px-3 py-1 bg-indigo-600 text-white rounded text-sm" onclick="arrangeService('2')">安排服务</button>
            </div>
        </div>

        <!-- 阿姨卡片3 -->
        <div class="bg-white rounded-lg shadow-sm card-hover p-4 auntie-card" data-status="terminated">
            <div class="flex items-center">
                <img src="https://s.coze.cn/image/cxhLKN0tFN0/" class="w-16 h-16 rounded-full object-cover mr-4" alt="王阿姨">
                <div class="flex-1">
                    <div class="flex justify-between items-center">
                        <h3 class="font-semibold text-lg">王阿姨</h3>
                        <span class="text-sm bg-gray-100 text-gray-800 px-2 py-1 rounded">已解约</span>
                    </div>
                    <div class="flex items-center mt-1">
                        <span class="text-sm text-gray-500 mr-2">服务次数: 5次</span>
                        <div class="flex items-center">
                            <i class="fas fa-star text-yellow-400 mr-1"></i>
                            <span class="text-sm">4.2</span>
                        </div>
                    </div>
                </div>
            </div>
            <div class="flex justify-end space-x-2 mt-3">
                <button class="px-3 py-1 border border-gray-300 rounded text-sm" onclick="viewDetail('3')">查看详情</button>
                <button class="px-3 py-1 bg-gray-400 text-white rounded text-sm" disabled>已解约</button>
            </div>
        </div>
    </div>

    <!-- 底部导航 -->
    <div class="fixed bottom-0 left-0 right-0 bg-white border-t border-gray-200 shadow-lg" style="max-width: 750px; margin: 0 auto;">
        <div class="flex justify-around py-2">
            <a href="employer-homepage.html" class="flex flex-col items-center px-2 py-2 text-gray-500 hover:text-gray-700 transition-colors duration-200">
                <i class="fas fa-home text-xl"></i>
                <span class="text-xs mt-1">首页</span>
            </a>
            <a href="employer-aunt-management.html" class="flex flex-col items-center px-2 py-2 text-indigo-600 relative">
                <i class="fas fa-user-friends text-xl"></i>
                <span class="text-xs mt-1">阿姨</span>
                <div class="absolute bottom-0 left-1/2 transform -translate-x-1/2 w-6 h-0.5 bg-indigo-600 rounded-full"></div>
            </a>
            <!-- <a href="employer-job-management.html" class="flex flex-col items-center px-2 py-2 text-gray-500 hover:text-gray-700 transition-colors duration-200">
                <i class="fas fa-briefcase text-xl"></i>
                <span class="text-xs mt-1">招聘</span>
            </a> -->
            <a href="employer-my-page.html" class="flex flex-col items-center px-2 py-2 text-gray-500 hover:text-gray-700 transition-colors duration-200">
                <i class="fas fa-user text-xl"></i>
                <span class="text-xs mt-1">我的</span>
            </a>
        </div>
    </div>

    <!-- 添加阿姨按钮 -->
    <!-- <button class="fixed bottom-20 right-4 w-14 h-14 bg-red-500 text-white rounded-full shadow-lg flex items-center justify-center" onclick="addAuntie()">
        <i class="fas fa-plus text-xl"></i>
    </button> -->

    <script>
        // 筛选阿姨状态
        function filterAunties(status) {
            // 更新按钮状态
            document.querySelectorAll('.flex.space-x-2 button').forEach(btn => {
                btn.classList.remove('active-status', 'bg-gray-100');
                btn.classList.add('bg-gray-100');
            });
            event.target.classList.remove('bg-gray-100');
            event.target.classList.add('active-status');
            
            // 筛选卡片
            const cards = document.querySelectorAll('.auntie-card');
            cards.forEach(card => {
                if(status === 'all' || card.dataset.status === status) {
                    card.style.display = 'block';
                } else {
                    card.style.display = 'none';
                }
            });
        }

        // 搜索阿姨
        function searchAunties() {
            const searchTerm = document.getElementById('searchInput').value.toLowerCase();
            const cards = document.querySelectorAll('.auntie-card');
            
            cards.forEach(card => {
                const name = card.querySelector('h3').textContent.toLowerCase();
                if(name.includes(searchTerm)) {
                    card.style.display = 'block';
                } else {
                    card.style.display = 'none';
                }
            });
        }

        // 查看详情
        function viewDetail(id) {
            window.location.href = 'aunt-info.html';
        }

        // 安排服务
        function arrangeService(id) {
            alert('为阿姨ID: ' + id + '安排服务');
        }

        // 添加阿姨
        function addAuntie() {
            alert('添加新阿姨');
        }
    </script>
</body>
</html>